<template>
    <view class="content">
        <a-demo title="基础使用" desc="数据驱动">
            <pure-swiper
                :list="list"
                :current="current1"
                @change="handleChange1"
                autoplay
                circular></pure-swiper>
        </a-demo>

        <a-demo title="基础使用" desc="结合 swiper-item 自定义内容">
            <pure-swiper :list="list" :current="current2" circular @change="handleChange2" autoplay>
                <swiper-item class="swiper-item" v-for="(_item, _index) in list" :key="_index">
                    <view class="swiper-item-content">
                        <pure-image
                            :src="_item.src"
                            :placeholder="_item.src"
                            mode="aspectFill"
                            width="100%"
                            height="100%"></pure-image>
                    </view>
                </swiper-item>
            </pure-swiper>
        </a-demo>

        <a-demo title="指示器">
            <view :class="indicatorPosition">
                <pure-swiper
                    :list="list"
                    :current="current3"
                    autoplay
                    circular
                    indicator
                    :indicatorMode="indicatorMode"
                    :separator="separator"
                    @indicatorItemClick="(index) => (current3 = index)"
                    @change="(e) => (current3 = e.detail.current)"></pure-swiper>
            </view>
        </a-demo>

        <a-demo title="指示器模式">
            <pure-radio-group v-model="indicatorMode">
                <pure-radio
                    v-for="radio in indicatorModes"
                    :value="radio.value"
                    :label="radio.label"
                    :key="radio.value"></pure-radio>
            </pure-radio-group>
        </a-demo>

        <a-demo title="指示器位置">
            <pure-radio-group v-model="indicatorPosition">
                <pure-radio
                    v-for="radio in indicatorPositions"
                    :value="radio.value"
                    :label="radio.label"
                    :key="radio.value"></pure-radio>
            </pure-radio-group>
        </a-demo>

        <a-demo title="指示器在外部">
            <view class="pure-indicator-static">
                <pure-swiper
                    :list="list"
                    :current="current7"
                    autoplay
                    circular
                    indicator
                    :indicatorMode="indicatorMode"
                    @indicatorItemClick="(index) => (current7 = index)"
                    @change="(e) => (current7 = e.detail.current)"></pure-swiper>
            </view>
        </a-demo>

        <a-demo title="左/右切换按钮">
            <view :class="[arrowPosition, isShrink ? 'pure-prev-next-shrink' : '']">
                <pure-swiper
                    :list="list"
                    :current="current6"
                    @change="(e) => (current6 = e.detail.current)"
                    @prev="handlePrev6"
                    @next="handleNext6"
                    arrow></pure-swiper>
            </view>
        </a-demo>

        <a-demo title="切换按钮位置">
            <pure-cell icon="/static/icons/button.png" title="切换按钮收缩布局" arrow>
                <template #desc>
                    <pure-switch v-model="isShrink"></pure-switch>
                </template>
            </pure-cell>
        </a-demo>

        <a-demo title="切换按钮位置">
            <pure-radio-group v-model="arrowPosition">
                <pure-radio
                    v-for="radio in arrowPositions"
                    :value="radio.value"
                    :label="radio.label"
                    :key="radio.value"></pure-radio>
            </pure-radio-group>
        </a-demo>

        <a-demo title="左/右切换按钮静态模式">
            <view class="pure-prev-next-static pure-prev-next-center-bottom pure-prev-next-shrink">
                <pure-swiper
                    :list="list"
                    :current="current6"
                    @change="(e) => (current6 = e.detail.current)"
                    @prev="handlePrev6"
                    @next="handleNext6"
                    arrow></pure-swiper>
            </view>
        </a-demo>

        <a-demo title="显示数量" class="swiper2">
            <view class="pure-indicator-static">
                <pure-swiper
                    :list="list"
                    :current="current4"
                    autoplay
                    circular
                    :displayMultipleItems="2"
                    previousMargin="-10px"
                    nextMargin="-10px"
                    indicator
                    @change="(e) => (current4 = e.detail.current)"></pure-swiper>
            </view>
        </a-demo>

        <a-demo title="纵向滑动">
            <pure-swiper
                :list="list"
                :current="current5"
                circular
                autoplay
                vertical
                indicator
                @change="(e) => (current5 = e.detail.current)"></pure-swiper>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref, computed } from "vue";

    // 数据
    const list = ref([
        { title: "第二项", src: "/static/placeholder.jpg", title: "第一项标题" },
        { title: "第三项", src: "/static/placeholder.jpg", title: "第二项标题" },
        { title: "第四项", src: "/static/placeholder.jpg", title: "第三项标题" },
    ]);
    const current1 = ref(0);
    const current2 = ref(0);
    const current3 = ref(0);
    const current4 = ref(0);
    const current5 = ref(0);
    const current6 = ref(0);
    const current7 = ref(0);
    const current8 = ref(0);
    const current9 = ref(0);
    const current10 = ref(0);

    // 指示器模式
    const indicatorModes = ref([
        { label: "圆点模式", value: "dot" },
        { label: "条状模式", value: "bar" },
        { label: "线模式", value: "line" },
        { label: "数字模式", value: "number" },
        { label: "索引模式", value: "index" },
        { label: "标题模式", value: "title" },
        { label: "进度模式", value: "progress" },
    ]);
    const indicatorMode = ref("dot");

    // 指示器位置
    const indicatorPositions = ref([
        { label: "底部居中", value: "pure-indicator-bottom-center" },
        { label: "底部居左", value: "pure-indicator-bottom-left" },
        { label: "底部居右", value: "pure-indicator-bottom-right" },
        { label: "顶部居中", value: "pure-indicator-top-center" },
        { label: "顶部居左", value: "pure-indicator-top-left" },
        { label: "顶部居右", value: "pure-indicator-top-right" },
        { label: "左侧居中", value: "pure-indicator-left-center" },
        { label: "左侧居上", value: "pure-indicator-left-top" },
        { label: "左侧居下", value: "pure-indicator-left-bottom" },
        { label: "右侧居中", value: "pure-indicator-right-center" },
        { label: "右侧居上", value: "pure-indicator-right-top" },
        { label: "右侧居下", value: "pure-indicator-right-bottom" },
    ]);
    const indicatorPosition = ref("pure-indicator-bottom-center");
    const separator = computed(() => {
        if (
            [
                "pure-indicator-bottom-center",
                "pure-indicator-bottom-left",
                "pure-indicator-bottom-right",
                "pure-indicator-top-center",
                "pure-indicator-top-left",
                "pure-indicator-top-right",
            ].includes(indicatorPosition.value)
        )
            return "/";
        return "-";
    });

    // 切换按钮位置
    const arrowPositions = ref([
        { label: "顶部", value: "pure-prev-next-top" },
        { label: "居中", value: "pure-prev-next-middle" },
        { label: "底部", value: "pure-prev-next-bottom" },
        { label: "左上", value: "pure-prev-next-left-top" },
        { label: "左下", value: "pure-prev-next-left-bottom" },
        { label: "右上", value: "pure-prev-next-right-top" },
        { label: "右下", value: "pure-prev-next-right-bottom" },
        { label: "中上", value: "pure-prev-next-center-top" },
        { label: "中下", value: "pure-prev-next-center-bottom" },
    ]);
    const arrowPosition = ref("pure-prev-next-middle");
    const isShrink = ref(false);

    // 切换
    function handleChange1(e) {
        current1.value = e.detail.current;
    }

    // 切换
    function handleChange2(e) {
        current2.value = e.detail.current;
    }

    // 上一个
    function handlePrev6(index) {
        console.log("上一个", index);
        current6.value = index;
    }

    // 下一个
    function handleNext6(index) {
        console.log("下一个", index);
        current6.value = index;
    }
</script>

<style scoped>
    .swiper-item-content {
        width: 100%;
        height: 100%;
    }

    .swiper2 {
        --pure-swiper-item-padding: 0 10px;
    }
</style>
